<template>
  <div id="CenterBox">
    <div class="navlist">
      <div
        @click="state(index)"
        v-for="(item, index) in list1"
        :key="index"
        :class="{ active: nowindex == index }"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="goodslist">
      <p>热销</p>
      <div class="goodbox" v-for="(item, index) in list2" :key="index">
        <div class="pic">
          <img :src="item.pic" alt="" />
        </div>
        <div class="right">
          <div class="text">
            <div class="name">{{ item.name }}</div>
            <div class="intro">{{ item.intro }}</div>
          </div>
          <div class="money-add">
            <div class="money">￥{{ item.money }}</div>
            <div class="add">＋</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import haixian1 from "../../assets/haixian/haixian1.png";
import haixian2 from "../../assets/haixian/haixian2.png";
import haixian3 from "../../assets/haixian/haixian3.png";
import haixian4 from "../../assets/haixian/haixian4.png";
export default {
  data() {
    return {
      nowindex: 0,
      list1: [
        { name: "热销" },
        { name: "优惠" },
        { name: "三文鱼" },
        { name: "刺身" },
        { name: "年货礼品区" },
        { name: "野生大对虾" },
        { name: "冻货区" },
        { name: "贝壳螺类" },
        { name: "鲜虾活鱼" },
      ],
      list2: [
        {
          pic: haixian1,
          name: "三文鱼刺身",
          intro: "取自三文鱼腰部，口感鲜嫩",
          money: 45,
        },
        {
          pic: haixian2,
          name: "国产生蚝刺身",
          intro: "每一只都是广东生蚝，异常肥美",
          money: 45,
        },
        {
          pic: haixian3,
          name: "挪威醇鲜三文鱼厚片",
          intro: "百分之百空运直达",
          money: 45,
        },
        {
          pic: haixian4,
          name: "北极甜虾",
          intro: "每份30只，月销量50吨，100%好评！！",
          money: 45,
        },
      ],
    };
  },
  methods: {
    state(index) {
      this.nowindex = index;
    },
  },
};
</script>

<style scoped>
#CenterBox {
  flex: 1;
  display: flex;
  border-top: 1px solid rgb(240, 239, 239);
  margin-top: 5px;
}
#CenterBox .navlist {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#CenterBox .navlist div {
  box-sizing: border-box;
  padding: 0 10px;
  margin-left: 2px;
}
#CenterBox .navlist div.active {
  border-left: 2px solid red;
  font-weight: 700;
  margin-left: 0;
}

#CenterBox .goodslist p{
    line-height: 40px;
    font-weight: 700;
    font-size: 14px;
}
#CenterBox .goodslist .goodbox {
  margin: 0 10px 10px 0;
  display: flex;
}
#CenterBox .goodslist .goodbox .right{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#CenterBox .goodslist .goodbox .text .name {
  font-size: 14px;
  font-weight: 800;
}
#CenterBox .goodslist .goodbox .text .intro {
  font-size: 12px;
  color: gray;
}
#CenterBox .goodslist .goodbox .text {
  margin-left: 10px;
}
#CenterBox .goodslist .goodbox .money-add {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
}
#CenterBox .goodslist .goodbox .money-add .money {
  font-size: 14px;
  color: red;
  font-weight: 800;
}
#CenterBox .goodslist .goodbox .money-add .add {
  text-align: center;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: 0;
  margin-left: 90px;
  color: white;
  background-color: lightskyblue;
}
</style>